<template>
  <div class="allpage">
    <el-form
      :inline="true"
      :model="formInline"
      ref="formInline"
      label-width="100px"
      class="form-style"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item prop="SaleManName" style="margin:10px 0">{{formInline.SaleManName}}</el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item style="margin:10px 0">
            <el-button @click="choose" icon="el-icon-circle-plus">选择团长</el-button>
          </el-form-item>
        </el-col>
         <el-col :span="6">
          <el-form-item prop="order" style="margin:10px 0">
            <el-input v-model="formInline.order" placeholder="订单号"></el-input>
          </el-form-item>
        </el-col>
       <el-col :span="8">
          <el-form-item label="订单状态：" prop="region" style="margin:10px 0">
            <el-select v-model="formInline.region">
              <el-option
                v-for="(toitem,toindex) in options"
                :label="toitem.label"
                :key="toindex"
                :value="toitem.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
      </el-row>


    <el-row>
      <el-col :span="7">
          <el-form-item prop="time" style="margin:10px 0 10px 30px">
            <el-date-picker type="date" placeholder="下单时间" v-model="formInline.time"
            value-format="yyyy-MM-dd" style="width:100%;">
          </el-date-picker>
          </el-form-item>
        </el-col>
      <el-col :span="8">
        <el-form-item label="订单类型：" prop="region1" style="margin:10px 0">
            <el-select v-model="formInline.region1">
              <el-option
                v-for="(item,index) in optionss"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="8">
          <el-form-item style="margin:10px 0"> 
        <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      </el-form-item>
      </el-col>
    </el-row>
    </el-form>

    <div class="tor-mid table-style">
      <el-table :data="tableData">
        <el-table-column label="商品" width="300">
          <template slot-scope="scope">
            <div class="tor-mid-good">
              <div class="tor-mid-good-top">
                <div>
                  订单号：
                  <span style="color:blue">{{scope.row.AllOrderNumber}}</span>
                </div>
                <div>{{scope.row.CreateTime}}</div>
              </div>
              <!-- go -->
              <div
                class="tor-mid-good-bot"
                v-for="(imgItem,imgIndex) in scope.row.OrderProductsList"
                :key="imgIndex"
              >
                <div class="tor-mid-good-bot-left">
                  <el-image
                    v-image-preview
                    style="width:60px;height:60px"
                    :src="imgItem.ProductPhoto"
                  ></el-image>
                </div>
                <div class="tor-mid-good-bot-right">
                  <p class="tor-mid-good-bot-right-top">{{imgItem.ProductName}}</p>
                  <div class="tor-mid-good-bot-right-bot">
                    <span style="color:red;width:70px">￥{{imgItem.PayProductPrice}}</span>
                    <div
                      class="tor-mid-good-bot-right-bot-b"
                    >{{imgItem.OrderNumber}}{{imgItem.ProductModelStr}}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单总额">
          <template slot-scope="scope">
            <span style="color:red">￥{{scope.row.AllPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单类型">
          --
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.sale===1">自卖</p>
            <p v-show="scope.row.sale===2">自卖（分销员帮卖）</p>
            <p v-show="scope.row.sale===3">自卖（推荐返现）</p>
          </template>-->
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <p v-show="scope.row.StateStr==='已完成'" style="color:green">{{scope.row.StateStr}}</p>
            <p v-show="scope.row.StateStr==='未完成'" style="color:red">{{scope.row.StateStr}}</p>
          </template>
        </el-table-column>
        <el-table-column label="收货人" width="115">
          <template slot-scope="scope">
            <p>{{scope.row.ReceivingName}}</p>
            <p>{{scope.row.ReceivingPhoneNumber}}</p>
          </template>
        </el-table-column>
        <el-table-column label="取件类型" prop="ReceivingTypeStr">
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.statce==='on'">邮寄</p>
            <p v-show="scope.row.statce==='off'">自提</p>
          </template>-->
        </el-table-column>
        <el-table-column prop="SalesManName" label="团长"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="godetail(scope.$index,scope.row.AllOrderNumber)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
    
    <tor-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      @getusername="getSaleManName"
    />
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import TorDialog from "./TorDialog";
import bus from "@/components/homepage/children/bus";
import { LoadOrder } from "@/request/api";
export default {
  components: {
    Botpage,
    TorDialog,
  },
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      total: 1,
      options: [
        { label: "全部", value: 1 },
        { label: "未完成", value: 2 },
        { label: "已完成", value: 3 },
      ],
      optionss: [
        { label: "全部", value: 1 },
        { label: "自卖", value: 2 },
        { label: "自卖（分销员帮卖）", value: 3 },
        { label: "自卖（推荐返现）", value: 4 },
        { label: "帮卖（其他团长）", value: 5 },
        { label: "帮卖（小龙直营）", value: 6 },
        { label: "帮卖（推荐返现）", value: 7 },
      ],
      formInline: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      LoadOrder({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        Time :this.formInline.time,
        OrderNumber : this.formInline.order,

      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for ( let i in this.tableData ) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSaleManName(msg) {
      console.log(msg + "===================");
      this.formInline.SaleManName = msg;
    },
    search() {
      this.getTableData();
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableData()
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if (reload === "reload") {
        this.getTableData();
      }
    },
    choose() {
      this.dialogFormVisible = true;
      this.dialogTitle = "选择团长";
    },
    godetail(index, row) {
      let Tordetail = this.tableData[index];
      console.log(Tordetail);
      console.log(row)
      this.$router.push({
        path: "/torderdetail",
        query: { detail: this.tableData[index] , AllOrderNumber : row }
      });
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableData();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.tor-mid {
  .tor-mid-good {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .tor-mid-good-top {
      flex: 1;
      display: flex;
      justify-content: space-between;
      font-size: 10px;
    }
    .tor-mid-good-bot {
      flex: 4;
      display: flex;
      .tor-mid-good-bot-right {
        flex: 2;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        margin-left: 10px;
        .tor-mid-good-bot-right-top {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .tor-mid-good-bot-right-bot {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          .tor-mid-good-bot-right-bot-b {
            flex: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>